<template>
	<el-container>
		<el-header class="title" style="height: 40px">
			万事达-TMS运输端
			<el-button type="danger" plain size="mini">退出系统</el-button>
		</el-header>
		<el-main>
			<el-container>
				<el-header class="currTitle" style="height: 30px">
					运输执行-签收单
				</el-header>
				<el-main>
					<!--搜索部分-->
					<el-row>
						<el-col :span="3">
							<el-select v-model="optionsValue" placeholder="请选择" size="small">
								<el-option
										v-for="item in options"
										:key="item.value"
										:label="item.label"
										:value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="4">
							<el-input v-model="input" placeholder="请输入内容" size="small"></el-input>
						</el-col>
						<el-col :span="3" style="margin-left: 20px">
							<el-select v-model="timeValue" placeholder="请选择" size="small">
								<el-option
										v-for="item in timeOptions"
										:key="item.value"
										:label="item.label"
										:value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="7">
							<el-date-picker
									v-model="pickerTime"
									type="daterange"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									size="small"
									style="width: 100%">
							</el-date-picker>
						</el-col>
						<el-col :span="2"></el-col>
						<el-col :span="2" style="margin-left: 20px">
							<el-button type="info" @click="search" size="small">搜索</el-button>
						</el-col>
					</el-row>

					<!--分类-->
					<el-row class="tabs">
						<el-badge :value="200" :max="99" class="item">
							<el-tabs v-model="activeTab" @tab-click="changeTabs">
								<el-tab-pane label="全部" name="total"></el-tab-pane>
							</el-tabs>
						</el-badge>
						<el-badge :value="20" :max="99" class="item">
							<el-tabs v-model="activeTab" @tab-click="changeTabs">
								<el-tab-pane label="待处理" name="pending"></el-tab-pane>
							</el-tabs>
						</el-badge>
						<el-badge :value="10" :max="99" class="item">
							<el-tabs v-model="activeTab" @tab-click="changeTabs">
								<el-tab-pane label="已处理" name="processed"></el-tab-pane>
							</el-tabs>
						</el-badge>
					</el-row>

					<!--表格部分-->
					<el-table
							ref="multipleTable"
							:data="currentPageData"
							border
							size="mini"
							fit
							tooltip-effect="dark"
							style="width: 100%;"
							:header-cell-style="{background:'rgb(220,220,220)',color:'black'}"
							@selection-change="handleSelectionChange">
						<el-table-column label="操作" show-overflow-tooltip width="50px">
							<el-button type="primary" icon="el-icon-edit" circle size="mini" @click="returnConfirm"></el-button>
						</el-table-column>
						<el-table-column
								prop=""
								label="订单号"
								show-overflow-tooltip>
						</el-table-column>
						<el-table-column
								prop=""
								label="下单日期"
								show-overflow-tooltip>
							<template slot-scope="scope">{{ scope.row.date }}</template>
						</el-table-column>
						<el-table-column
								prop=""
								label="运单号"
								show-overflow-tooltip>
						</el-table-column>
						<el-table-column
								prop=""
								label="委托方"
								show-overflow-tooltip>
						</el-table-column>
						<el-table-column
								prop="phone"
								label="委托人电话"
								show-overflow-tooltip>
						</el-table-column>
						<el-table-column
								prop=""
								label="始发地"
								show-overflow-tooltip>
						</el-table-column>
						<el-table-column
								prop=""
								label="目的地"
								show-overflow-tooltip>
						</el-table-column>
						<el-table-column
								prop=""
								label="车牌"
								show-overflow-tooltip>
						</el-table-column>
						<el-table-column
								prop=""
								label="上传回单时间"
								show-overflow-tooltip>
						</el-table-column>
						<el-table-column
								prop=""
								label="状态"
								show-overflow-tooltip>
						</el-table-column>
					</el-table>

					<!--表格分页功能-->
					<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="currentPage"
							:page-sizes="[10, 15, 20]"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="this.tableData.length">
					</el-pagination>

				</el-main>
			</el-container>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: 'Sign',
	props: {
		msg: String
	},
	data() {
		return {
			input: '',
			options: [{
				value: 'receiver',
				label: '收货人'
			}, {
				value: 'origin',
				label: '始发地'
			}, {
				value: 'destination',
				label: '目的地'
			}, {
				value: 'orderNo',
				label: '订单号'
			}, {
				value: 'waybillNo',
				label: '运单号'
			}, {
				value: 'goods',
				label: '货名'
			}, {
				value: 'company',
				label: '公司名'
			}, {
				value: 'contact',
				label: '联系人'
			}],
			optionsValue: 'receiver',
			timeOptions: [{
				value: 'returnTime',
				label: '回单交接时间'
			},{
				value: 'orderTime',
				label: '下单时间'
			}],
			timeValue: 'returnTime',
			pickerTime: '',
			activeTab: 'total',
			tableData: [{
				date: '2016-05-03',
				name: '王小虎',
				address: '上海'
			}, {
				date: '2016-05-02',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-04',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-01',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-08',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-06',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}, {
				date: '2016-05-07',
				name: '王小虎',
				address: '上海市'
			}],
			currentPageData: [],
			multipleSelection: [],
			currentRowId: null,
			currentPage: 1,
			pageSize: 10

		}
	},
	methods: {
		search() {
			console.log('search!');
		},
		changeTabs(tab, event) {
			console.log(tab, event);
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		handleSizeChange(val) {
			this.pageSize = val;
			this.currentPageData = this.tableData.slice((this.currentPage-1)*val,this.currentPage*val);
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			this.currentPage = val;
			this.currentPageData = this.tableData.slice((val-1)*this.pageSize,val*this.pageSize);
			console.log(`当前页: ${val}`);
		},
		returnConfirm(){
			this.$router.push({path: '/client/ReturnConfirm'});
		}
	},
	mounted() {
		this.currentPageData = this.tableData.slice(0,this.pageSize);
	}
}
</script>

<style>
.el-table td, .el-table th {
	text-align: center !important;
}

</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

* {
	text-align: left;
	margin: 0;
	padding: 0;
}
.el-header.title {
	background-color: rgb(153,169,191);
	color: #333;
	margin-bottom: 5px;
	font-weight: 700;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
main.el-main {
	padding: 0;
}
.el-header.currTitle{
	background-color: rgb(211,220,230);
	line-height: 30px;
	margin-bottom: 5px;
}

.tabs {
	margin: 5px 0 -10px;
}
.item {
	margin-top: 10px;
	margin-right: 50px;
}


</style>

